Aizen Architecture HTML5 Template

Aizen Architecture Template Documentation v1.0 by Brandify Studio

Introduction

First of all, thank you for purchasing this template and for being a loyal customer. You are entitled to get free lifetime updates to this product and support from the author directly.

This documentation will help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here. You can also check a short video below.

Buyers Guide to Customizing HTML Templates

If you are new to HTML, I highly recommend that you watch the video tutorial below which I have outlined all basic steps for customizing HTML. Its 20 minutes long. But It worth it if you are a newbie.

Please note: The demo shown in this video is based on another template, but it will definitely help you in editing this template.

Requirements to Customize this Template

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad++)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

Getting Started #back to top

If you are able to read this documentation locally, which means you have successfully downloaded the package and extracted the zip. The file structure as follows:

									Aizen/
									├── Help Docs/
									├── HTML/
									│   ├── css/
									│   ├── fonts/
									│   ├── images/
									│   ├── js/
									│   ├── plugins/
									│   ├── php/

The folder you have to customize is the HTML folder. Copy HTML folder from the package and paste it in your project folder. This helps you to prevent overwriting in original files. If you messed up something, you will get the original here.

Pages #back to top

Here is the list of HTML pages included in this template:

  1. Home Page index.html
  2. About about.html
  3. Services services.html
  4. Services Single services-single.html
  5. Projects projects.html
  6. Projects Single projects-single.html
  7. Team team.html
  8. Testimonials testimonials.html
  9. FAQs faqs.html
  10. Gallery gallery.html
  11. Error Page error-page.html
  12. Blog List blog.html
  13. Blog Single blog-single.html
  14. Contact contact.html

Home Page Slider #back to top

For home page header slider, we have used Slider Revolution. To customize the images and the caption, please follow the steps below:

  1. Copy your header images in to /images/main-slider folder.
  2. Now replace the img tag src with the new image name.
  3. You can also change the captions inside the tp-caption divs. Please, note that h2 is for the slide title, div class="text" is for the slide description and a href="about.html" is for the slide link. You can edit the button text, too.
  4. For more settings like speed, delay or other properties, please check out the official docs.

Google Map#back to top

Google Map of your Location is shown in the contact page. To setup, follow the steps below:

Step 1: Get your API Key

  1. Go to Google Maps Developers Website.
  2. Click on "Go to the Credentials page" button.
  3. Accept terms and conditions.
  4. Click on "Create Project" button.
  5. Fill in the details as required.
  6. Click on "Create Credentials" > API key.
  7. Now you can see the API key. Copy that.

Step 2: Add the API key to the HTML File

Open the HTML page which contains the Google Map (eg: contact.html). Now, find the following line of code (at very bottom of the page).

<script src="http://maps.google.com/maps/api/js?&key=YOUR_MAPS_API_KEY_HERE"></script>

Change YOUR_MAPS_API_KEY_HERE with your actual Google Maps API key.

Step 3: Add Latitude & Longitude in HTML

  1. Open contact.html and find the div for Google Maps (see code below).
  2. Change the data-lat value with latitude and data-lon value with longitude.
  3. You can also change the data-zoom to adjust the Zoom Value (between 12 and 15 will be ok).
  4. To get Latitude and Longitude of your location, please visit: https://www.gps-coordinates.net/.
									<div class="map-canvas">
										data-zoom="14"
										data-lat="40.753638"
										data-lng="-73.988446"
										data-type="roadmap"
										data-hue="#ffc400"
										data-title="Aizen Architecture"
										data-icon-path="images/icons/map-marker.png"
										data-content="525 7th Avenue, New York City, USA<br<>a href='mailto:hello@sensedesign.com'>hello@sensedesign.com</a>">
									</div>

Form Settings #back to top

Contact form #back to top

To setup contact form, follow the steps below.

To receive emails, first you need to set your email address. Open /php/contact.php file in your code editor. Then you can change the Email ID and Subject. See code below.

Note: Contact form will work only on a PHP Live Server Environment with Mail() function Enabled Servers. It won't work locally as well as on server where Mail() function is disabled. So Please contact the server admin before opening a support ticket. 
/*
* ------------------------------------
* Contact Form Configuration
* ------------------------------------
*/

$to	= "email@example.com"; // Your email ID here 

$server_email = 'webmaster@yourdomain.com'; // Your domain email to authenticate outgoing emails
Tip: If you did not see the message in your email inbox, a) Please check Spam / Junk Folder b) Try using another email.

Redirect on Success (Thank you page)

If you want your users to be redirected to another page after completing the form successfully such as thank you page or success page. It is really easy to do with this template. Open the HTML and just add data-redirect="/path/to/thanks.html" to <form> element and you are done. See example: 

<!-- // NOTE THE data-redirect attribute -->
<form action="php/contact.php" method="POST" data-redirect="contact-success.html">

Alternatively, if you don't want to redirect your users and want to stay in same page, just change the data-redirect attribute value to none.

Extras #back to top

Web Hosting #back to top

Once you have finished all customizations, the next step is to upload your web template to a live Hosting Server. In order to do that you will need to buy a domain name and a hosting plan from a service provider.

Uploading to Server #back to top

Once you have registered a domain name and hosting, you will get FTP details from your hosting provider. Use that login details to connect with your server. You will need an FTP Software for this, such as FileZilla. Connect with your server and open /public_html folder in your server. Then copy all HTML, CSS and JS files from your local machine to your root /public_html folder in your server. Please note the HTML files should be in the Server's root folder. If your local project is in /your-folder/ do not upload the folder directly. Instead, open the folder and select all HTML files and CSS, JS folders and upload.

Credits #back to top

We are really thankful to the makers of the frameworks, plugins and images below. We used these to make this web template more functional. All demo images you have seen in Live Preview are not included in the download package because of their copyright restrictions.

Frameworks

  1. Bootstrap

Plugins

  1. Revolution Slider
  2. Owl Carousel
  3. FancyBox
  4. Appear
  5. Mix It Up
  6. Font Awesome
  7. Validate

Libraries

  1. jQuery

Images

  1. Unsplash
  2. Pexels

Others

  1. PHPMailer
  2. Google Maps

Changelog #back to top

Version 1.0 (20 April, 2021) #back to top

Initial release

Rate It #back to top

If you like the template, please consider rating it on ThemeForest by visiting your downloads page. It means a lot for us!

Rate this template

Support #back to top

Please remember you have purchased an affordable template and you have not paid for web agency services. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Please be patient, polite and respectful. We will try to answer your questions as soon as possible.

Support for my items includes:
  1. Responding to questions or problems regarding the item and its features.
  2. Fixing bugs and reported issues.
  3. Providing updates to ensure compatibility with new software versions.
Item support does not include:
  1. Customization and installation services.
  2. Support for third party software and plugins.
Before making a support request:
  1. Make sure your question is a valid issue and not a customization request.
  2. Make sure you have read through the documentation and any related guides before asking support on how to accomplish a task.
  3. Try to use "Google Search" for common questions. Most of the times, which will help faster than the support.

Contact Support

Copyright © Brandify Studio - All rights reserved.